<template>
  <div style="width:100%;height:100%;">
    <v-echarts :autoresize="true" :option="state.optionsData" :update-options="{notMerge: true}"/>
  </div>

</template>

<script setup>
import {defineComponent, reactive, toRefs, onMounted, watch, nextTick, computed} from 'vue'
import {deepMerge, deepClone, guid} from '@/utils/toolUtils'
import * as echarts from 'echarts'
import useScreen from '@/hooks/useScreen'
const props = defineProps({
    options: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
const {screenComputed} = reactive(useScreen())
const state = reactive({
    uuid: guid(),
    optionsData: {
      color: ['rgba(95, 213, 236, 1)', 'rgba(238, 111, 124, 1)', 'rgba(54, 134, 255, 1)', 'rgba(83, 240, 146, 1)'],
      title: {
        text: ''
      },
      tooltip:{
        trigger: 'axis'
      },
      legend: {
        right: "5%",
        itemWidth: screenComputed(10),
        itemHeight: screenComputed(10),
        icon: "rect",
        top: "20%",
        height: "70%",
        orient: "vertical",
        align: "auto",
        itemGap: screenComputed(30, true),
        
        textStyle: {
            fontSize: screenComputed(14),
            padding:screenComputed(10),
            color: "#C3CED5",
            fontFamily: "font-family: Source Han Sans CN-Regular, Source Han Sans CN",
        },
      },
      radar: [
        {
          indicator: [],
          center: ['30%', '50%'],
          radius: screenComputed(130),
          splitNumber: 4,
          axisName: {
          formatter: '{value}',
          color: 'rgba(255,255,255,0.85)',
          height:10,
          padding:[0,0,screenComputed(-10),0]
          },
          splitArea: {
          areaStyle: {
              color: ['RGBA(31, 49, 88, .5)','RGBA(31, 49, 88, .7)', 'RGBA(42, 59, 96, 1)', 'RGBA(31, 49, 88, 1)'],
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10
          }
          },
          axisLine: {
          
          lineStyle: {
              color: 'RGBA(43, 61, 97, 1)'
          }
          },
          splitLine: {
            lineStyle: {
              color: 'RGBA(43, 61, 97, 1)'
            }
          },
                
        }
      ],
      series: [
        {
            type: 'radar',
            emphasis: {
            lineStyle: {
                width: 4,  
            }
            },
            symbolSize:0,
            data: []
        },
            
      ]
    }
})
const initData = (data) =>{
    if (data.title)
      state.optionsData.title = deepMerge(
        state.optionsData.title,
        data.title
      );
    if (data.tooltip)
      state.optionsData.tooltip = deepMerge(
        state.optionsData.tooltip,
        data.tooltip
      );
    if (data.color)
      state.optionsData.color = deepMerge(
        state.optionsData.color,
        data.color
      );
    if (data.legend)
      state.optionsData.legend = deepMerge(
        state.optionsData.legend,
        data.legend
      );
    if (data.radar)
      state.optionsData.radar = deepMerge(
        state.optionsData.radar,
        data.radar
      );
    if (data.series)
      state.optionsData.series = deepMerge(
        state.optionsData.series,
        data.series
      );
    // piecircle.value.setOption(state.optionsData, true);
        // piecircle.value.resize();
}
    onMounted(() => {

    })
    //监听options参数变化
    watch(() => props.options, (newData) => {
      if (newData && Object.keys(newData).length) {
        nextTick(() => {
            initData(newData)
        })
      }
    }, {
      immediate: true,
    })

</script>
<style scoped lang="scss">
.polyline {
  @include wh100();
}
</style>
<style lang="scss">

</style>
